<!--培训系统模板-->
<template>
<div id="index" @contextmenu.prevent=""> 
  <div class="logo-a"></div>
		<Battery></Battery>
		<div class="container">
			<div class="interactive-l">
			  <div class="interactive-la">
				<ul>
					<li :class="{active:leftIndex===index}" v-for="(ietm,index) in ietms" :key="ietm.id" :id="ietm.id" @click="title=ietm.title,leftIndex=index,topIndex=0,clickLeft('/ietm/data/'+ietm.id)">{{ietm.title}}</li>
				</ul>
			  </div>
			</div>
			<div class="interactive-r">
				<div class="interactive-ra">{{title}}</div>
				<div class="interactive-rb">
					<div class="interactive-rba">
						<ul>
								<li :class="{active:topIndex===index}" v-for="(ietm,index) in ietms1" :key="ietm.id" :id="ietm.id" @click="topIndex=index,clickTop('/ietm/data/'+ietm.id)">{{ietm.title}}</li>
						</ul>
					</div>
					<div class="interactive-rbb">
						<div class="interactive-rbba" style="display:block">
							<ul>
                <!--右侧下方导航条,如果此处有dmc且根据数量判断为一个则直接跳入-->
                  <li  v-for="ietm in ietms2" :key="ietm.id" :id="ietm.id" @click="clickContext(ietm.id,ietm.title)">
                  <!--  <router-link :to="{ name: 'Pms', params: { id: ietm.id,title:ietm.title }}" tag="div" > -->
                      <span>{{ietm.title}}</span>
                  <!--   </router-link> -->
                    </li>
							</ul>
						</div>
					
					</div>
				</div>
			</div>
		</div>
		<!--导航栏隐藏-->
		<div class="nav-bottom-show" @click="menu=!menu"></div>
		<div class="nav-bottom-hide"></div>
		<div class="nav-bottom-content" :class="{active:menu}">
		    <ul>
				<router-link :to="{ name: menu.name, params: { id: menu.id,title:menu.title }}" v-for="menu in menus" :key="menu.id" >
						<li >
						<img :src="'/static/images/'+menu.img" />
						<p>{{menu.title}}</p>
						</li>
				</router-link>
		    </ul>
		</div>
</div>
</template>

<script>
import Battery from "@/components/Battery";
import Title from "@/components/Title";
export default {
  name: "Ietm",
  components: {
    Battery
  },
  data() {
    return {
      menu: false,
      title: "",
      pid: "", //父页面获取到的值
      ietms: [],
      ietms1: [],
      ietms2: [],
      leftIndex:0,
      topIndex:0,
      isInit: true,
      applic:'',
      menus: [
        { id: "1", img: "nav-bottom-01.png", name: "Index", title: "主页" },
       /*  { id: "2", img: "nav-bottom-07.png", name: "Adapt", title: "适用性" }, */
        { id: "3", img: "nav-bottom-05.png", name: "Media", title: "多媒体" },
        { id: "4", img: "nav-bottom-04.png", name: "Help",  title: "用户帮助系统"},
        { id: "5", img: "nav-bottom-03.png", name: "Record", title: "访问记录" },
        { id: "6", img: "nav-bottom-06.png", name: "IetmLog", title: "日志管理" }
      ]
    };
  },
  methods: {
    clickLeft: function(url) {//点击左侧列表触发
      this.axios.get(url).then(res => {
        this.ietms1 = res.data.pms;
      });
    },
    clickTop: function(url) {//点击中部上方内容
      this.axios.get(url).then(res => {
        this.ietms2 = res.data.pms;
      });
    },clickContext: function(pid,title){//点击第三级内容
      //根据查询结果如果有且仅有一个DM直接跳转，否则就进入文件列表页和文件夹页
       this.axios.get("/ietm/data/"+pid,{params:{type:"dm",applic:this.applic}}).then(res => {
         if(res.data.dms.length===1){
          this.$router.push({name:'Content',params: { id: res.data.dms[0].dmId,title:res.data.dms[0].dmTitle }})
         }else{
          this.$router.push({name:'Pms',params: { id: pid,title:title}})
         }
          window.localStorage.setItem("Ietm_Pid",this.pid);
		      window.localStorage.setItem("Ietm_Title",this.title);
      });
    },
    getData: function() {
      this.axios.get("/ietm/data/"+this.pid,{params:{type:"pm",applic:this.applic}}).then(res => {
        this.ietms = res.data.pms;
        this.axios.get("/ietm/data/" + this.ietms[0].id,{params:{type:"pm",applic:this.applic}}).then(res => {
        this.ietms1 = res.data.pms;
        this.axios.get("/ietm/data/" + this.ietms1[0].id,{params:{type:"pm",applic:this.applic}}).then(res => {
          this.ietms2 = res.data.pms;
        });
      });
      });
      /* this.axios.get("/ietm/data/" + this.pid,{params:{type:"pm"}}).then(res => {
        this.ietms1 = res.data.pms;
        this.axios.get("/ietm/data/" + this.ietms1[0].id,{params:{type:"pm"}}).then(res => {
          this.ietms2 = res.data.pms;
        });
      }); */
    }
  },
  created() {
    this.isInit = true;//页面刷新时将isInit=true再次进入标识为初始状态
    window.localStorage.setItem("applic",this.applic);
  },
  beforeRouteLeave(to, from, next) {//当离开该页面时如果往回退则将isInit=true再次进入标识为初始状态
    if (to.name == "Index") {
      this.isInit = true;
    }
    next();
  },
  activated() {
    //缓存被触发时
    if (this.$route.params.id){//如果从上一个页面跳转过来，获取路由数据，同时存储到本地,防止刷新数据丢失
      this.pid = this.$route.params.id;
      this.title = this.$route.params.title;
      this.applic=this.$route.params.applic;
      window.localStorage.setItem("Ietm_Pid",this.$route.params.id);
      window.localStorage.setItem("Ietm_Title",this.$route.params.title);
      window.localStorage.setItem("applic",this.$route.params.applic);
    } else{
      this.pid = window.localStorage.getItem("Ietm_Pid");
      this.title = window.localStorage.getItem("Ietm_Title");
      this.applic = window.localStorage.getItem("applic");
    }
    if (this.isInit) {
      this.getData();
      this.isInit = false;
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/index.css");
@import url("../../assets/css/animation.css");
</style>

